<template>
	<view class="page page-coupon" style="padding-bottom: 0;">
		<LoadMore ref="LoadMore" id="LoadMore" :diffHeight="0" :initData="initData" @dataRefresh='dataRefresh'>
			<!-- banner -->
			<uni-swiper-dot :info="banners" :current="bannerCurrent" mode="round" :dotsStyles="dotsStyles">
				<swiper class="banner bg-cover" :autoplay="true" :interval="3000" :circular="true"
					@change="swiperChange">
					<swiper-item class="banner w100 h100" v-for="(item, index) in banners" :key="index">
						<view class="banner w100 h100 bg-cover"
							:style="{backgroundImage: 'url(' + (imgPath + item.img) + ')'}"
							@click="goUrl(item.url_type, item.url, item.appid)">
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<!-- <view class="banner bg-cover" :style="{backgroundImage: 'url(' + banner + ')'}"></view> -->
			<!-- 列表 -->
			<view class="coupon-list" style="margin-top: -40rpx;">
				<block v-for="(item, index) in dataList" :key="index">
					<view class="box-shadow item" @click="goNext('/pages/coupon/detail?id=' + item.id)">
						<view class="part1 flex-row-start">
							<view class="tag"
								:class="{color1: item.coupon_type == '40',color1: item.coupon_type == '50', color2: item.coupon_type == '20', color3: item.coupon_type == '30', color4: item.coupon_type == '10'}">
								{{item.coupon_type_name}}
							</view>
							<!-- 满减10 -->
							<view v-if="item.coupon_type == 10" class="left flex-column-center">
								<view>
									<text class="font15">￥</text>
									<text class="font20 font-b">{{item.reduce_money}}</text>
								</view>
								<view class="font10 font-646464">{{'满￥' + item.full_money + '可用'}}</view>
							</view>
							<!-- 折扣20 -->
							<view v-if="item.coupon_type == 20" class="left flex-column-center">
								<view>
									<text class="font20 font-b">{{item.discount*10}}</text>
									<text class="font15">折</text>
								</view>
								<view class="font10 font-646464">无门槛</view>
							</view>
							<!-- 立减30 -->
							<view v-if="item.coupon_type == 30" class="left flex-column-center">
								<view>
									<text class="font15">￥</text>
									<text class="font20 font-b">{{item.reduce_money}}</text>
								</view>
								<view class="font10 font-646464">无门槛</view>
							</view>
							<!-- 兑换券40 -->
							<view class="left left0 flex-column-center" v-if="item.coupon_type == 40">
								<view class="font17 font-b">{{item.coupon_type_name}}</view>
								<view class="font10 font-646464">无门槛</view>
							</view>
							<!-- 停车券50 -->
							<view class="left left0 flex-column-center" v-if="item.coupon_type == 50">
								<view class="font17 font-b">停车券</view>
								<view class="font10 font-646464">无门槛</view>
							</view>
							<view class="right">
								<view>
									<text class="font14 font-b name ellipsis">{{item.name}}</text>
								</view>
								<view class="font11 font-969696">{{item.verify_mode == 10 ? '线上' : '线下'}}使用</view>
								<view class="font11 font-969696">{{item.coupon_begin_time}}-{{item.coupon_end_time}}
								</view>
							</view>
							<view @click.stop="Onreceive(item)" class="btn" :class="item.couponObj.type?'':'grey'">
								{{item.couponObj.title}}
							</view>
						</view>
						<view class="part2 flex-row-between" @click.stop="Onpages(item)">
							<text class="font12">适用范围：{{item.verify_mode == 10?item.classify == 10?'指定门店使用':item.classify == 20?'指定商品使用':
								item.use_room_type==0?'指定房型使用':item.use_room_type==1?'指定普通房型使用':'指定时租房使用':'线下核销使用'}},点击查看详情</text>
							<uni-icons class="font-b" type="arrowright" size="9" color="#000000"></uni-icons>
						</view>
					</view>
				</block>
			</view>
		</LoadMore>
		<!-- 悬浮按钮 -->
		<image class="btn-my-coupon" src="https://static.newbeaconhotels.com/app/hotel/my/btn-my-coupon.png"
			@tap="goNext('/pages/coupon/myList')">
		</image>
	</view>
</template>

<script>
	import LoadMore from "@/components/j-loadMore/index.vue";
	export default {
		components: {
			LoadMore
		},
		data() {
			return {
				imgPath: this.$Config.http_static, // 图片头
				// banner: 'https://static.newbeaconhotels.com/app/hotel/temporary/coupon-center.png',
				banners:[],
				dataList: [],
				// 传参数据
				initData: {
					url: 'coupon',
					param: {}
				},
				dotsStyles: {
					width: 6,
					height: 6,
					bottom: 30,
					border: '0 rgba(255,255,255,.4) solid',
					backgroundColor: 'rgba(255,255,255,.4)',
					selectedBackgroundColor: '#ffffff',
					selectedBorder: '0 #ffffff solid'
				},
			}
		},
		onLoad: function(options) {
			this.OnBanner()
		},
		methods: {
			//获取
			OnBanner() {
				this.$Http({
					url: 'couponBanner',
					data: {}
				}).then(res => {
					if (res.code == 1) {
						this.banners = res.data
						// this.group = res.data.data
					}
				});
			},
			// LoadMore返回列表数据
			dataRefresh(e) {
				e.forEach(item => {
					item.couponObj = this.$base.Oncoupon(item.max_number, item.day_number, item.count, item
						.day_count)
				})
				console.log(e, '查看')
				this.dataList = e
			},
			//跳转
			goNext(url) {
				this.$Router.push(url)
			},
			//页面跳转
			Onpages(obj) {
				//线下
				if (obj.verify_mode == 20) {
					this.$Router.push('/pages/coupon/detail?id=' + obj.id)
				} else {
					//制定商品使用
					if (obj.classify == 20) {
						this.$Router.push('/pages/group/list?id=' + obj.id)
					}
					//酒店使用
					if (obj.classify == 10 || obj.classify == 30) {
						//指定普通房型使用
						if (obj.use_room_type == 1) {
							this.$Router.push('/pages/hotel/hotelList?couponId=' + obj.id)
						}
						//指定时租房使用
						if (obj.use_room_type == 2) {
							this.$Router.push('/pages/hotel/hourRoomList?couponId=' + obj.id)
						}
					}
				}
			},
			//去领券
			Onreceive(e) {
				if (e.couponObj.type) {
					this.$Router.push('/pages/coupon/detail?id=' + e.id)
				} else {
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: e.couponObj.msg
					});
				}
			},
			// 广告跳转
			goUrl (type, url, appid) {
				this.$base.goUrl(type, url, appid)
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
